<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.vue封装的过渡</title>
		<script type="text/javascript" src="./vue.js"></script>
		<style>
			h1{
				background-color: orange;
				width: 150px;
				transition: 1s linear all;
			}
			/* 离开的终点，也是来的起点 */
			.v-leave-to,.v-enter{
				transform: translateX(-100%);
			}
			/* 离开的起点，也是来的终点 */
			.v-leave,.v-enter-to{
				transform: translateX(0px);
			}
		</style>
	</head>
	<body>
		<div id="demo">
			<button @click="isShow = !isShow">点我切换：显示/隐藏</button>
			<transition>
				<h1 v-show="isShow">你好啊！</h1>
			</transition>
		</div>

		<script type="text/javascript" >
			new Vue({
				el:'#demo',
				data:{
					isShow:true
				}
			})
		</script>
	</body>
</html>